<template>
  <up-tabbar :value="currentTab" @change="onTabChange">
    <up-tabbar-item text="课程" icon="grid-fill"></up-tabbar-item>
    <up-tabbar-item text="聊天" icon="chat-fill"></up-tabbar-item>
    <up-tabbar-item text="我的" icon="account-fill"></up-tabbar-item>
  </up-tabbar>
</template>
    <script>
export default {
  name: "my-tabbar",
  props: {
    // 当前选中的标签索引
    currentIndex: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      tabbarList: [
        {
          icon: "home",
          name: "课程",
          path: "/pages/index/index",
        },
        {
          icon: "message",
          name: "聊天",
          path: "/pages/chat/chat",
        },
        {
          icon: "user",
          name: "我的",
          path: "/pages/user/my",
        },
      ],
    };
  },
  computed: {
    currentTab() {
      return this.currentIndex;
    },
  },
  methods: {
    onTabChange(index) {
      if (this.currentTab === index) return;

      this.currentTab = index;

      // 根据选中的标签切换页面
      uni.navigateTo({
        url: this.tabbarList[index].path,
      });
    },
  },
};
</script>